import {RosterItem} from "../../../model/pages/activity/roster-list/roster-list-item.model";
import * as _ from 'lodash';

const DOWN = 'DOWN';
const UP = 'UP';

export class Vs {

    public totalHeight = 0;
    public heightList = [];
    public elList = [];
    public index = 0;
    public direction = DOWN;
    private lastScrollY = 0;
    private rosterList;
    public virtualArr;
    private virtualMap = [];
    private el;
    public changeIndexArr;
    public translateValArr;
    private domNum;
    private container;
    private wrapper;


    constructor(rosterList, el, container, wrapper = '.roster-list-card', domNum = 15) {
        this.container = container;
        this.rosterList = rosterList;
        this.el = el;
        this.domNum = domNum;
        this.changeIndexArr = [];
        this.translateValArr = [];
        this.computedHeight();
        this.initVirtualArr();
        this.wrapper = wrapper;
        for (let i = 0; i < domNum; i++) {
            this.virtualMap.push({
                elIndex: i,
                dataIndex: i
            });
        }
        this.initElList();
    }

    initElList() {
        setTimeout(() => {
            let dom = <HTMLElement>document.querySelector(this.wrapper);
            if (dom && this.rosterList.length !== 0) {
                dom.style.height = this.totalHeight + 30 + 'px';
            } else {
                dom.style.height = window.innerHeight - window.innerWidth * 0.563 + 'px';
            }
            this.elList = Array.from(document.querySelectorAll(this.el));
            this.elList.forEach((item, index) => {
                item.style.top = this.computedSum(index) + 'px';
            });
            let container = this.elList[0] ? this.elList[0].parentNode.parentNode : null;
            if (container) {
                container.scrollTop = 0;
            }
        }, 0);
    }

    computedSum(index) {
        let height = 30 / 1080 * window.innerWidth;
        for (var i = 0; i < index; i++) {
            height += this.heightList[i];
        }
        return height;
    }

    initVirtualArr() {
        if (this.rosterList.length > this.domNum) {
            this.virtualArr = this.rosterList.slice(0, this.domNum);
        } else {
            this.virtualArr = this.rosterList;
        }
        return this.virtualArr;
    }

    computedHeight() {
        this.rosterList.forEach((item) => {
            let height = this.singleHeight(item);
            this.heightList.push(height);
            this.totalHeight += height;
        });
    }

    singleHeight(roster: RosterItem) {
        let len = roster.activitys.length;
        if (len === 1) {
            return 330 / 1080 * window.innerWidth;
        } else {
            return 163 / 1080 * window.innerWidth * len + 30 / 1080 * window.innerWidth;
        }
    }

    computedDirection(e) {
        if (this.lastScrollY - e.scrollTop > 0) {
            this.direction = UP;
        } else {
            this.direction = DOWN;
        }
        this.lastScrollY = e.scrollTop;
    }

    handleScrollEvent() {
        let e = {
            scrollTop: document.querySelector(this.container).scrollTop
        };
        this.computedDirection(e);
        this.handleElPos(e);
        return this.virtualArr;
    }

    handleElPos(e) {
        let nodeList = Array.from(this.elList);
        nodeList.forEach((el, index) => {
            let virtualPoint = this.virtualMap[index];
            let o = _.clone(virtualPoint.dataIndex);
            let times = Math.floor(virtualPoint.dataIndex / this.domNum);
            if (this.isOver(e.scrollTop, el, this.direction)) {
                let y = this.computedTranslateY(el);
                if (this.direction === DOWN && o + this.domNum < this.rosterList.length) {
                    if (this.changeIndexArr.indexOf(index) === -1) {
                        this.virtualMap[index].dataIndex = (times + 1) * this.domNum + index;
                        this.virtualArr[index] = this.rosterList[this.virtualMap[index].dataIndex];
                        let height = 0;
                        for (let i = 0; i < this.domNum; i++) {
                            height += this.heightList[o + i];
                        }
                        this.changeIndexArr.push(index);
                        this.translateValArr.push(y + height);
                    }
                } else if (this.direction === UP && o - this.domNum >= 0) {
                    if (this.changeIndexArr.indexOf(index) === -1) {
                        virtualPoint.dataIndex = (times - 1) * this.domNum + index;
                        this.virtualArr[index] = this.rosterList[virtualPoint.dataIndex];
                        let height = 0;
                        for (let i = 1; i <= this.domNum; i++) {
                            height += this.heightList[o - i];
                        }
                        this.changeIndexArr.push(index);
                        this.translateValArr.push(y - height);
                    }
                }
            }
        });
    }

    updateDom() {
        this.setElTop();
        setTimeout(() => {
            this.setElTop();
        }, 0);
        setTimeout(() => {
            this.setElTop();
        }, 50);
        setTimeout(() => {
            this.setElTop();
        }, 150);
    }

    setElTop () {
        this.changeIndexArr.forEach((changeIndex, index) => {
            let el = document.querySelectorAll(this.el)[changeIndex];
            if (el) {
                el.style.top = `${this.translateValArr[index]}px`;
            }
        });
        this.changeIndexArr = [];
        this.translateValArr = [];
        this.elList = document.querySelectorAll(this.el);
    }


    // 判断每个符合条件的DOM
    isOver(scrollTop, el, direction) {
        let translateY = this.computedTranslateY(el);
        if (direction === DOWN) {
            if (translateY + el.clientHeight + 30 / 1080 * window.innerWidth < scrollTop - 20) {
                return true;
            }
            return false;
        } else if (direction === UP) {
            if (translateY > scrollTop + window.innerHeight + 20) {
                return true;
            }
            return false;
        }
    }

    computedTranslateY(el) {
        // let translateY = el.style.transform ? el.style.transform.split('(')[1].split('px')[0] : 0;
        let top = el.style.top ? el.style.top.split('px')[0] : 0;
        return Number(top);
    }
}


